<template>
  <div class="container">
    <div class="reminderTop" v-if="topTipShow">
      <i class="el-icon-warning"></i>应用类型维护说明：您所使用的【
      <span style="color: #ff4242"
        >{{ inputInfo.serverName }}{{ inputInfo.version }}</span
      >】版本维护，暂时无法与平台对接，如有问题请与管理员联系。
    </div>
    <div class="topCon">
      <el-row class="topContent">
        <div>
          <span class="titleTop">首页</span>
          <span class="status statusColor">{{
            inputInfo.environmentName || '--'
          }}</span>
          <span class="status">{{ inputInfo.serverName || '--' }}</span>
          <span class="status">版本号：{{ inputInfo.version || '--' }}</span>
        </div>
      </el-row>
    </div>
    <div class="mainCon" :style="{ top: topTipShow ? '232px' : '198px' }">
      <el-row class="titleWrap">
        <span class="titleInfo">对接流程</span>
      </el-row>
      <div class="reminderBox">
        <ul class="reminder">
          <li>
            <span>1</span>
            <div class="heightBox">
              <p class="step">步骤一</p>
              <p class="fontColor">进入正式环境，由管理员分配AppID及接口</p>
            </div>
          </li>
          <li class="arrowRight">
            <span class="border"></span>
          </li>
          <li>
            <span>2</span>
            <div class="heightBox">
              <p class="step">步骤二</p>
              <p class="fontColor">进入测试环境，调试接口</p>
            </div>
          </li>
          <li class="arrowRight">
            <span class="border"></span>
          </li>
          <li>
            <span>3</span>
            <div class="heightBox">
              <p class="step">步骤三</p>
              <p class="fontColor">
                调试成功后，联系管理员开通正式AppID使用权限
              </p>
            </div>
          </li>
          <li class="arrowRight">
            <span class="border"></span>
          </li>
          <li>
            <span>4</span>
            <div class="heightBox">
              <p class="step">步骤四</p>
              <p class="fontColor">使用正式接口完成对接</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- <div class="spacing"></div> -->
      <div class="todayStatistics">
        <transition name="fade">
          <img
            src="/static/img/interfacePlatform/serviceIcon.png"
            class="service"
            v-if="service"
            @mouseover="mouseOver"
          />
          <div
            class="serviceBox boxShadow"
            v-if="serviceImgCon"
            @mouseleave="mouseleave"
          >
            <img
              src="/static/img/interfacePlatform/serviceIcon.png"
              class="serviceTwo"
            />
            <div class="content">
              <p>问题咨询</p>
              <p>18672195601</p>
            </div>
          </div>
        </transition>
        <!-- <div class="titleInfo">今日接口统计（实时更新）</div> -->
        <!-- 列表 -->
        <!-- <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" highlight-current-row stripe v-loading="loading" style="border: 1px solid #dfe6ec">
                    <el-table-column prop="projectName" label="接口名称" :formatter="formatTd"></el-table-column>
                    <el-table-column prop="shouldPay,bankActPay" label="处理成功次数" :formatter="formatTd">
                        <template slot-scope="scope">
                            <span style="color:#5fab2b;">{{scope.row.shouldPay || "0"}}</span>/{{scope.row.bankActPay || "0"}}
                        </template>
                    </el-table-column>
                     <el-table-column prop="shouldPay,bankActPay" label="处理失败次数" :formatter="formatTd">
                        <template slot-scope="scope">
                            <span style="color:#ff4242;">{{scope.row.shouldPay || "0"}}</span>/{{scope.row.bankActPay || "0"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="left" :formatter="formatTd">
                        <template slot-scope="scope">
                            <el-link type="primary">查看详情</el-link>
                        </template>
                    </el-table-column>
                    <div slot="empty" v-show="isShow">
                        <emptyTable emptyText="暂无相关信息"></emptyTable>
                    </div>
                </el-table>
                <Pagination ref="pagination" @getList="getTableList" :requestUrl="requestUrl" @getpageSize="getpageSize" @getpageNo="getpageNo"></Pagination> -->
      </div>
    </div>
  </div>
</template>
<script>
//引入vue数字滚动插件vue-countTo
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  name: 'interfaceAccountClient',
  data() {
    return {
      titleText: '首页',
      requestUrl: 'api-d/trinomial/expand/list',
      loading: true,
      isShow: false,
      tableData: [], //表格数据
      pageSize: 20,
      pageNo: 1,
      service: true,
      serviceImgCon: false,
      topTipShow: false, //enabled 启用显示  DISABLE 禁用不显示顶部
      inputInfo: {},
    }
  },
  created() {
    //获取环境，名称，版本号
    this.getInputUserServer()
    // this.$nextTick(function() {
    //     this.$refs.pagination.getTableListData();
    // });
  },
  methods: {
    // 移入
    mouseOver() {
      this.serviceImgCon = true
      this.service = false
    },
    //移出
    mouseleave() {
      this.serviceImgCon = false
      this.service = true
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    getInputUserServer() {
      this.axios({
        method: 'post',
        url: 'api-m/inputUserServer/base/v1/list',
        data: {
          userId: this.$store.state.userId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.inputInfo = response.data.result[0] || {}
            //enabled 启用显示  DISABLE 禁用不显示顶部
            this.topTipShow = this.inputInfo.enabled == 'ENABLED' ? false : true
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.reminderTop {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 24px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
}
.topContent {
  background: #e4ebf1;
  height: 67px;
  padding: 20px 24px;
  margin-bottom: 24px;
  .status {
    display: inline-block;
    padding: 4px;
    background: #3fa9ff;
    font-size: 12px;
    color: #ffffff;
    border-radius: 2px;
    vertical-align: top;
    margin-top: 2px;
    margin-left: 4px;
  }
  .statusColor {
    background: #5fab2b;
  }
  .titleTop {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.mainCon {
  top: 208px;
  padding: 0;
  .titleInfo {
    padding: 10px 24px;
    font: 16px/50px Microsoft YaHei;
    &::before {
      display: inline-block;
      width: 4px;
      height: 24px;
      background: #17a487;
      content: '';
      //这个指为正的话 小方块就往上， 为负的话，小方块就往下
      vertical-align: -5px;
      margin-right: 15px;
    }
  }
  .reminderBox {
    width: 882px;
    margin: auto;
    height: 140px;
    ul {
      height: 32px;
      font-size: 0;
      position: relative;
      .arrowRight {
        text-align: center;
        line-height: 100%;
        .border {
          position: absolute;
          top: 28px;
          left: -16px;
          display: inline-block;
          width: 100%;
          height: 1px;
          background: #e8e7e8;
        }
      }
      li {
        float: left;
        width: 19%;
        position: relative;
        height: 100%;
        &:nth-child(even) {
          width: 8%;
        }
        span {
          background: #009588;
          display: inline-block;
          width: 26px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          border-radius: 50%;
          margin-right: 10px;
          position: absolute;
          top: 50%;
          left: 10px;
          margin-top: -12px;
        }
        .heightBox {
          position: absolute;
          left: 40px;
          font-size: 14px;
          top: 10px;
          .step {
            font-weight: 600;
            margin-bottom: 10px;
            margin-left: 12px;
          }
          .fontColor {
            color: #333;
            line-height: 21px;
            margin-left: 12px;
          }
        }
      }
    }
  }
  .spacing {
    width: 100%;
    height: 10px;
    background-color: #f5f7fa;
  }
  .todayStatistics {
    padding: 10px 24px;
    .titleInfo {
      padding: 0 0 10px 0;
    }
    /deep/ .service {
      position: fixed;
      width: 48px;
      top: 408px;
      right: 0;
      z-index: 99999;
    }
    .serviceBox {
      width: 122px;
      height: 48px;
      background: #fff;
      padding: 8px 20px;
      position: fixed;
      right: 0;
      top: 408px;
      font-size: 14px;
      z-index: 9999;
      box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.2);
      .serviceTwo {
        position: fixed;
        width: 48px;
        top: 408px;
        right: 122px;
      }
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: 0.3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
      opacity: 0;
    }
  }
  .title {
    margin-bottom: 30px;
    font-size: 18px;
  }
}
</style>
